<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/style.css">
    <!--引入Vue-->
    <script src="./js/axios.min.js"></script>
    <script src="./js/main.js"></script>
    <script src="./js/vue.js"></script>
    <title>登录</title>
    <style>
        #feng {
            background-image: url(./img/feng.png);
            background-size: 100%;
            min-width: calc(80vh / 781.971947 *500);
            width: calc(80vh / 781.971947 *500);
            height: 80vh;
            /* 500 / 781.971947*/
            position: relative;
        }

        #fan {
            background-image: url(./img/feng-1.png);
            width: calc(80vh / 781.971947 * 200);
            height: calc(80vh / 781.971947 * 205);
            background-size: 100%;

            position: absolute;
            top: calc(80vh / 781.971947 * 226);
            left: calc(80vh / 781.971947 * 26);
            transform-origin: 47.52% 49.087%;
            animation: rotation 0.01s linear infinite;
        }

        #Open {
            background-image: url(./img/Open.png);
            width: calc(80vh / 781.971947 * 80)
                /*80px*/
            ;
            height: calc(80vh / 781.971947 * 80);
            background-size: 100%;

            position: absolute;
            top: calc(80vh / 781.971947 * 50);
            left: calc(80vh / 781.971947 * 340);
            transform-origin: center;
            animation: rotation 0.01s linear infinit
        }

        #Open:hover {
            background-image: url(./img/Open-2.png);
        }

        #app {
            width: 75%;
            margin: 5% auto;
        }

        .windows {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            background-color: white;
            border-radius: 20px;
            padding: 50px 20px;
            width: 500px;
            min-height: 400px;
        }

        .windows>* {
            text-align: center;
        }

        #light {
            background-image: url(./img/light2.png);

            width: calc(80vh / 781.971947 * 80);
            height: calc(80vh / 781.971947 * 38);
            background-size: 100%;

            position: absolute;
            top: calc(80vh / 781.971947 * 102);
            left: calc(80vh / 781.971947 * 228);

            opacity: 0;
            transition: opacity 1s;
        }

        #light2 {
            background-image: url(./img/light.png);

            width: calc(80vh / 781.971947 * 80);
            height: calc(80vh / 781.971947 * 38);
            background-size: 100%;

            position: absolute;
            top: calc(80vh / 781.971947 * 102);
            left: calc(80vh / 781.971947 * 228);

            opacity: 0;
            transition: opacity 5s;
        }


        [id=beam] {
            top: calc(80vh / 781.971947 * 123);
            right: calc(80vh / 781.971947 * 245);
            transform: translateY(-50%) rotate(var(--beamDegrees, 0));
        }

        [id=beam1] {
            top: calc(80vh / 781.971947 * 125);
            right: calc(80vh / 781.971947 * 210);
            transform: translateY(-50%) rotate(var(--beamDegrees1, 0));
        }

        /* 设置光束样式 */
        [id=beam],
        [id=beam1] {
            position: absolute;
            /* 设置绝对定位 */
            clip-path: polygon(100% 50%, 100% 50%, 0 0, 0 100%);
            /* 设置剪切路径为多边形 */
            width: 100vw;
            /* 设置宽度为100vw */
            height: 25vw;
            /* 设置高度为25vw */
            z-index: 1;
            /* 设置层级为1 */
            mix-blend-mode: multiply;
            /* 设置混合模式为multiply */
            transition: opacity 2s;
            /* 设置过渡效果为3s的ease-out */
            transform-origin: 100% 50%;
            /* 设置变换原点为右侧50% */
            pointer-events: none;
            /* 禁用指针事件 */
            background: rgb(255, 145, 145);
            /* 设置背景颜色为RGB(255, 255, 145) */
            opacity: 0;
        }

        .windows>div>table {
            margin: 40px auto;
        }

        .windows>div>table label {
            text-align: right;
            width: 100%;
            display: block;
            font-size: 18px;
            line-height: 30px;
        }

        .windows>div>table tr,
        .windows>div>table td {
            height: 60px;
        }

        .windows>div>table tr>:nth-child(2) {
            width: 85%;

        }

        .windows>div>table input:focus {
            outline: none;
        }

        .windows>div>table input {
            width: 100%;
            font-size: 18px;
            line-height: 30px;
            vertical-align: text-bottom;
            border: 0;
            border-bottom: 1px solid #bbbbbb;
        }

        .windows>div>div>button {
            width: 85%;
            height: 40px;
            margin: 15px 0;
            font-size: 20px;
            border: 1px solid #bbbbbb;
            border-radius: 2px;
        }

        #login {
            background-color: #D33325;
            color: #fff;
        }

        #login:hover {
            background-color: #BB2D24;
        }

        #singin {
            background-color: #F0F0F0;
        }

        #singin:hover {
            background-color: #d0d0d0;
        }
    </style>
</head>

<body>
    <div id="app" class="flex-container-between">
        <div id="feng">
            <div id="fan"></div>
            <a id="Open" @click="toggleRotation"></a>
            <div id="light"></div>
            <div id="light2"></div>
            <div id="beam"></div>
            <div id="beam1"></div>
        </div>
        <div>
            <div class="windows">
                <div>
                    <h1>登录</h1>
                    <table>
                        <tr>
                            <td><label for="username">用户名</label></td>
                            <td><input type="text" name="username" v-model="username" id="username"></td>
                        </tr>
                        <tr>
                            <td><label for="password">密码</label></td>
                            <td><input type="password" name="password" v-model="password" id="password"></td>
                        </tr>
                    </table>
                    <div>
                        <button id="login" @click="login()">登录</button>
                        <button id="singin" @click="singin()">注册</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                status: false,
                username: '',
                password: '',
            },
            methods: {
                toggleRotation() {
                    const div = document.querySelector('#fan');
                    const Open = document.getElementById("Open");
                    const light = document.getElementById("light");
                    const light2 = document.getElementById("light2");
                    document.body.classList.toggle('show-password'); // 切换body元素的类名
                    if (!this.status) {
                        div.style.animation = 'rotation-accelerate 0.01s linear infinite'; // 开始加速旋转动画
                        light.style.opacity = "1";
                        light2.style.opacity = "1";
                        document.getElementById("beam").style.opacity = "1";
                        document.getElementById("beam1").style.opacity = "1";

                    } else {
                        div.style.animation = 'rotation-decelerate 2s linear forwards'; // 开始减速直至停止旋转
                        light.style.opacity = "0";
                        light2.style.opacity = "0";
                        document.getElementById("beam").style.opacity = "0";
                        document.getElementById("beam1").style.opacity = "0";
                    }
                    this.status = !this.status;
                },
                login() {
                    this.toggleRotation()
                    setTimeout(() => {
                        axios.post('/user/login', {
                                username: this.username,
                                password: this.password
                            })
                            .then((response)=> {
                                const responsedata = response.data
                                console.log(response)
                                // 服务器状态码
                                if (responsedata.code != 0) {
                                    // 如果不为0，说明有错误, msg为云端错误信息
                                    alert(responsedata.msg);
                                    // 截断后面的运行
                                    if (responsedata.code == 401)
                                        window.location.href = "./login.html";
                                    return;
                                }
                                window.location.href = "./home.html";
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    }, 3500)
                },
                singin() {
                    axios.post('/user/register', {
                            username: this.username,
                            password: this.password
                        })
                        .then((response)=> {
                            const responsedata = response.data
                            console.log(response)
                            // 服务器状态码
                            if (responsedata.code != 0) {
                                // 如果不为0，说明有错误, msg为云端错误信息
                                alert(responsedata.msg);
                                // 截断后面的运行
                                if (responsedata.code == 401)
                                    window.location.href = "./login.html";
                                return;
                            }
                            window.location.href = "./home.html";
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            },
        })
    </script>
    <script>
        // 获取根元素和其他DOM元素
        const root = document.documentElement; // 获取根元素
        const eye = document.querySelector('#eyeball'); // 获取眼睛按钮元素
        const beam = document.querySelector('#beam'); // 获取光束元素
        const beam1 = document.querySelector('#beam1'); // 获取光束元素2
        const passwordInput = document.querySelector('#password'); // 获取密码输入框元素

        // 鼠标移动事件监听器
        root.addEventListener('mousemove', (e) => {
            // 获取光束的位置和鼠标位置
            let rect = beam.getBoundingClientRect(); // 获取光束元素的位置信息
            let rect1 = beam1.getBoundingClientRect(); // 获取光束元素的位置信息
            let mouseX = rect.right + (rect.width / 2); // 光束的横坐标
            let mouseY = rect.top + (rect.height / 2); // 光束的纵坐标
            let mouseX1 = rect1.right + (rect.width / 2); // 光束的横坐标
            let mouseY1 = rect1.top + (rect.height / 2); // 光束的纵坐标
            // 计算角度
            let rad = Math.atan2(mouseX - e.pageX, mouseY - e.pageY); // 计算鼠标和光束之间的角度
            let rad1 = Math.atan2(mouseX1 - e.pageX, mouseY1 - e.pageY); // 计算鼠标和光束之间的角度
            let degrees = (rad * (20 / Math.PI) * -1) - 350; // 将弧度转换为角度
            let degrees1 = (rad1 * (20 / Math.PI) * -1) - 350; // 将弧度转换为角度
            // 设置根元素的样式变量
            root.style.setProperty('--beamDegrees', `${degrees}deg`); // 设置根元素的样式变量，控制光束的旋转角度
            root.style.setProperty('--beamDegrees1', `${degrees1}deg`); // 设置根元素的样式变量，控制光束的旋转角度
        });
    </script>
</body>

</html>